<template>
  <div class="wrapper">
    <div id="div1">
      <label id="title">
        保证金账户信息
      </label>
      <form id="massageform">
        <div class="form-item">

          <div class="form-item2">
            <label>预存账户金额:</label>
          </div>
          <div class="form-item3">
            <label id="prestoremoney">{{money1}}元</label>
          </div>

          <div class="form-item2">
            <label>&emsp;</label>
          </div>
          <div class="form-item3">
            <label id="prestormoney">&emsp;</label>
          </div>



        </div>

        <div class="form-item">
          <div class="form-item2">
            <label>未冻结金额:</label>
          </div>

          <div class="form-item3">
            <label id="freemoney">{{money2}}元</label>
          </div>
          <div class="form-item2">
            <label>报价冻结金额:</label>
          </div>
          <div class="form-item3">
            <label id="freezemoney1">{{money3}}元</label>
          </div>
          <!--<div class="form-item2">-->
          <!--<label >履约冻结金额:</label>-->
          <!--</div>-->
          <!--<div class="form-item3">-->
          <!--<label id="freezemoney2">{{money4}}元</label>-->
          <!--</div>-->
        </div>

      </form>
    </div>
    <div id="div2">
      <label id="title2">汇款单位信息</label>
      <form id="unitmessage">
        <div class="form1-item">
          <div class="form-item4"><label>汇款单位名称：</label></div>
          <label>{{entername}}</label></div>
        <!--<div class="form1-item"><div class="form-item4"><label>开户行名称：</label></div><label>{{bankname}}</label></div>-->
        <!--<div class="form1-item"><div class="form-item4"><label>银行账号：</label></div><label>{{banknum}}</label></div>-->
        <div class="form1-item">
          <div class="form-item4"><label>预存金额：</label></div>
          <div>
            <input id="priceinput" v-model="price" type="text" list="optionlist">
            <datalist id="optionlist">
              <option value="10000">10000</option>
              <option value="30000">30000</option>
              <option value="50000">50000</option>
              <option value="100000">100000</option>
              <option value="300000">300000</option>
            </datalist>


          </div>
        </div>
        <div id="buttons">
          <el-button type="primary" @click="alipay">支付</el-button>
          <el-button type="primary">返回</el-button>
        </div>
      </form>
    </div>
    <div id="paydiv" v-html="payContent">

    </div>
  </div>
</template>

<script>
  import Common from "../common/Common";
  import axios from "axios";


  export default {
    name: "prestore",
    components: {
      Common
    },
    data() {
      return {
        money1: "0.0",
        money2: "0.0",
        money3: "0.0",
        money4: "0.0",
        entername: "",
        bankname: "",
        banknum: "",
        price: "",
        payContent: ""
      }
    },

    methods: {

      alipay() {
        if (this.price != null) {
          var idrum = this.oidrum();
          console.log(idrum);
          axios.get(Common.API + '/bond/alipay', {
            params: {
              oid: idrum,
              price: this.price,
              oname: "保证金预存",
            }
          })
            .then(Response => {
              this.payContent = Response.data;
              this.$nextTick(() => {
                  let form = document.getElementsByName("punchout_form")[0];
                  form.submit();
                }
              )

            });
        }
      },
      oidrum() {
        function S4() {
          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        return (S4() + "-" + S4() + "-" + S4() + "-" + S4());
      }
    },
    mounted: function () {
      axios.get(Common.API + '/bond/viewbond', {
        params: {
          id: Common.userInfo.id
        }
      })
        .then(Response => {
          this.money1 = Response.data.bond.account_balance;
          this.money2 = Response.data.bond.unfrozen_amount;
          this.money3 = Response.data.bond.contract_frozen_amount;
          this.entername = Response.data.enterpriseInfo.supplierName;
          this.bankname = Response.data.enterpriseInfo.bankOfDeposit;
          this.banknum = Response.data.enterpriseInfo.accountNumber;
          console.log(Response.data);
        })

    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .wrapper {
    width: 80%;
    position: relative;
  }

  #div1 {
    width: 100%;
    position: relative;
  }

  #div2 {
    width: 100%;
    position: relative;
  }

  #title {
    background: #545C64;
    color: #FFF;
    padding: 5px 40px;
    position: absolute;
    left: 10%;
  }

  #title2 {
    background: #545C64;
    color: #FFF;
    padding: 5px 40px;
    position: absolute;
    left: 10%;
    top: 170px;
  }

  #massageform {
    border-left: 1px #b9b9b9 solid;
    border-top: #545C64 2px solid;
    position: absolute;
    top: 30px;
    width: 960px;
    height: 100px;
    left: 10%;
    font-weight: bold;

  }

  #unitmessage {
    border-left: 1px #b9b9b9 solid;
    border-top: #545C64 2px solid;
    position: absolute;
    top: 200px;
    width: 960px;
    height: 400px;
    left: 10%;
    font-weight: bold;

  }

  .form-item {
    position: relative;
    border-bottom: #b9b9b9 1px dashed;
    padding: 20px 0;
    width: 100%;
  }

  .form1-item {
    position: relative;
    border-bottom: #b9b9b9 1px dashed;
    padding: 20px 0;
    width: 100%;

  }

  .form-item2 {
    float: left;
    width: 20%;
    margin-left: 2%;
    text-align: right;
  }

  .form-item3 {
    float: left;
    text-align: right;
    width: 20%;
    margin-left: 2%;
  }

  .form-item4 {
    float: left;
    margin-left: 5%;
    width: 15%;
    text-align: right;
  }

  input {
    float: left;
    position: relative;
    left: 2%;
    text-align: left;

  }

  #buttons {
    position: relative;
    bottom: -30px;
  }

  button {
    margin-left: 50px;
    margin-right: 30px;
    width: 70px;
    height: 30px;
  }

  #priceinput {
    width: 200px;
    height: 100%;

  }
</style>
